<template>
	<Header></Header>
	<div class="main">
		<Menu @menu-selected="handleMenuSelected" :username="username" :realName="realName"></Menu>
		<component :is="currentComponent" @activity-detail="handleMenuSelected" ></component>
	</div>
</template>

<script>
	import Header from '@/components/Header.vue'
	import Menu from '@/components/Menu.vue'
	import PubService from '@/components/PubService.vue'
	import Activity from '@/components/Activity.vue'
	import ActivityDetail from '@/components/ActivityDetail.vue'
	import { mapActions } from 'vuex'

	export default {

		//数据模型
		data() {
			return {
				//管理员信息
				username: '111',
				realName: '111',
				currentComponent: null // 用于动态渲染的组件名
			}
		},

		//方法
		methods: {
			//映射
			...mapActions('sysUser', ['getsysUser']),

			handleMenuSelected(menuItem) {
				switch (menuItem) {
					case 'PubService':
						this.currentComponent = PubService;
						break;
					case 'Activity':
						this.currentComponent = Activity;
						break;
					case 'ActivityDetail':
						this.currentComponent = ActivityDetail;
						break;
					default:
						this.currentComponent = null;
				}
			}

		},

		//挂载组件
		components: {
			Header,
			Menu
		},


		//判断是否有token，如果有，查询用户具体信息并且存入storage并直接跳转至主页
		async beforeMount() {
			let token = window.localStorage.getItem('token')
			if (token) {
				let res = await this.getsysUser(token)
				if (res.successful) {
					this.username = res.data.username
					this.realName = res.data.realName
				} else {
					//失败
					ElNotification({
						title: '信易加后台管理系统',
						message: '账号已过期！',
						type: 'error'
					})
					let token = window.localStorage.setItem('token', null)
					//跳转至主页
					this.$router.replace('/')
				}
			} else {
				//跳转至主页
				this.$router.replace('/')
			}
		}
	}
</script>

<style scoped>
	
	.main{
		display: flex;
	}
</style>